
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _info = _interopRequireDefault(require('../info'));

const _createNamespace = (0, _utils.createNamespace)('tab');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  props: {
    dot: Boolean,
    type: String,
    info: [Number, String],
    color: String,
    title: String,
    isActive: Boolean,
    ellipsis: Boolean,
    disabled: Boolean,
    scrollable: Boolean,
    activeColor: String,
    inactiveColor: String,
    swipeThreshold: [Number, String],
  },
  computed: {
    style: function style() {
      const style = {};
      const { color } = this;
      const { isActive } = this;
      const isCard = this.type === 'card'; // card theme color

      if (color && isCard) {
        style.borderColor = color;

        if (!this.disabled) {
          if (isActive) {
            style.backgroundColor = color;
          } else {
            style.color = color;
          }
        }
      }

      const titleColor = isActive ? this.activeColor : this.inactiveColor;

      if (titleColor) {
        style.color = titleColor;
      }

      if (this.scrollable && this.ellipsis) {
        style.flexBasis = `${88 / this.swipeThreshold}%`;
      }

      return style;
    },
  },
  methods: {
    onClick: function onClick() {
      this.$emit('click');
    },
  },
  render: function render() {
    const h = arguments[0];
    return h('div', {
      attrs: {
        role: 'tab',
        'aria-selected': this.isActive,
      },
      class: [bem({
        active: this.isActive,
        disabled: this.disabled,
        complete: !this.ellipsis,
      }), {
        'van-ellipsis': this.ellipsis,
      }],
      style: this.style,
      on: {
        click: this.onClick,
      },
    }, [h('span', {
      class: bem('text'),
    }, [this.slots() || this.title, h(_info.default, {
      attrs: {
        dot: this.dot,
        info: this.info,
      },
    })])]);
  },
});

exports.default = _default;
